<template>
  <div class="knowledge-box">
    <div class="knowledge" v-for="(item, index) in cknowledges" :key="index">
      <video
        class="knowledge-img"
        width="200px"
        height="160px"
        v-if="item.type === 'mp4' || item.type === 'MP4'"
        accept="MP4,mp4"
        :src="imgShowRoad + '/file/' + item.picPath"
        controls
        autoplay
      />
      <img
        v-else
        class="knowledge-img"
        :src="getImageSrc(item.picPath)"
        alt=""
      />

      <div class="info">
        <h4 class="title" @click="handleDetail(item)">{{ item.title }}</h4>
        <p class="content">{{ item.content }}</p>
        <span class="initiator">
          <img src="../assets/img/up-user.png" @click="handleDetail(item)" />
          <div>{{ item.ownName }}</div>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

// 从 Vue 3 的响应式 API 中导入 ref
import { ref } from "vue";

// 使用 useRouter 钩子获取路由实例
const router = useRouter();

const getImageSrc = (picture) => {
  return new URL(`../assets/file/order/${picture}`, import.meta.url).href;
};

// 定义响应式数据
const imgShowRoad = ref(""); // 这里需要根据你的实际情况来设置图片路径的前缀

// 定义 handleDetail 方法
const handleDetail = (item) => {
  router.push(`/home/knowledgeDetail?id=${item.knowledgeId}`);
};

// 接收父组件传递的 props
const props = defineProps({
  cknowledges: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="less" scoped>
.knowledge-box {
  width: 1300px;
  margin: 0 auto;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  .knowledge {
    width: 500px;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    margin: 10px;
    video {
      border: 1px solid #f2f2f2;
      border-radius: 6px;
    }
    .knowledge-img {
      float: left;
      width: 200px;
      height: 160px;
      margin-right: 10px;
      border-radius: 6px;
    }
    .info {
      .title {
        font-weight: bold;
        /*超出的部分隐藏*/
        overflow: hidden;
        /*文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*限制在一个块元素显示文本的行数*/
        -webkit-line-clamp: 1;
        /*设置或检索伸缩盒对象的子元素排列方式*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        margin: 0;
        &:hover {
          color: #035d1c;
          text-decoration: underline;
        }
      }
      width: 200px;
      float: left;
      .content {
        height: 100px;
        margin: 6px 0;
        /*超出的部分隐藏*/
        overflow: hidden;
        /*文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*限制在一个块元素显示文本的行数*/
        -webkit-line-clamp: 5;
        /*设置或检索伸缩盒对象的子元素排列方式*/
        -webkit-box-orient: vertical;
      }
      .initiator {
        color: #bfbfbf;
        display: flex;
        align-items: center;
        img {
          margin: 0;
          padding: 0;
          width: 20px;
          height: 20px;
          margin-right: 10px;
          vertical-align: center;
          border-radius: 6px;
        }
      }
    }
  }
}
</style>